<template>
  <div>
   <section>
          <div class="lock_name">
            <span>*</span>
             <p style="margin-right: 10px;">授权人员</p>
               <el-select v-model="name" placeholder="请选择授权人员">
                   <el-option
                     v-for="item in auth"
                     :key="item.id"
                     :label="item.real_name"
                     :value="item.id">
                   </el-option>
                 </el-select>
          </div>
          <div class="lock_name">
            <span>*</span>
             <p style="margin-right:10px;">授权时间</p>
                <el-date-picker
                     v-model="date"
                     type="datetimerange"
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期">
                   </el-date-picker>
          </div>
          <p class="notice">可以通过权限集、区域集合和单个门锁三种组合快速为授权人配置需要开的门锁权限集</p>
          <div class="box">
            <aside>
              <p>权限集</p>
              <div class="item">
                <span>搜索选定</span>
                <el-autocomplete
                      class="inline-input"
                      v-model="limit.text"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入权限集名称"
                       @select="handleSelect"
                      :trigger-on-focus="false"
                    ></el-autocomplete>
                    <!-- sidestar -->
                   <div class="wrap">
                     <span>已选择</span>
                     <div class="side" v-for="item in limit.select">

                            <el-checkbox-group v-model="limit.check" >
                                                  <el-checkbox
                                                                     :label="item.name"
                                                                     :key="item.id"
                                                                     :value="item.id"
                                                                     >
                                                       </el-checkbox>
                                    </el-checkbox-group>
                             <ul v-for="i in item.array">
                               	<li>{{i.lockalias}}</li>
                               </ul>
                          </div>
                   </div>
                   <!-- sideend-->
              </div>
            </aside>
            <aside>
              <p>区域集合</p>
              <div class="item">
                 <span>搜索选定</span>
                 <el-autocomplete
                       class="inline-input"
                       v-model="region.text"
                       :fetch-suggestions="querySearch1"
                       placeholder="请输入区域集合名称"
                        @select="handleSelect1"
                       :trigger-on-focus="false"
                     ></el-autocomplete>
                       <!-- sidestar -->
                      <div class="wrap">
                         <span>已选择</span>
                         <div class="side" v-for="item in  region.select">

                                <el-checkbox-group v-model=" region.check" >
                                                      <el-checkbox
                                                                         :label="item.name"
                                                                         :key="item.id"
                                                                         :value="item.id"
                                                                         >
                                                           </el-checkbox>
                                        </el-checkbox-group>

                           <ul v-for="i in item.array">
                              	<li>{{i.lockalias}}</li>
                              </ul>
                              </div>
                       </div>
                       <!-- sideend-->
              </div>
            </aside>
            <aside>
              <p>单个门锁</p>
              <div class="item">
                  <span>搜索选定</span>
                  <el-autocomplete
                        class="inline-input"
                        v-model="lock.text"
                        :fetch-suggestions="querySearch2"
                        placeholder="单行输入锁名称"
                         @select="handleSelect2"
                        :trigger-on-focus="false"
                      ></el-autocomplete>
                      <div class="wrap">
                         <span>已选择</span>
                         <div class="side">
                            <el-checkbox-group v-model="lock.check" >
                                               <el-checkbox          v-for="item in lock.select"
                                                                     :label="item.name"
                                                                     :key="item.id"
                                                                     :value="item.id"
                                                                     >
                                                 </el-checkbox>
                              </el-checkbox-group>
                         </div>
                      </div>
              </div>
            </aside>
          </div>
      </section>
   <div class="btn" >
          <span @click='submit()'>提交</span>
          <span @click='cancle'>取消</span>
      </div>
  </div>
</template>

<script>
  import {lockpowers_list,region_list,lock_list,add_user_power,userpowers_list,auth_user_list} from '../js/getApi.js'
  export default{
   props:['isshow'],
    data(){
      return{
        name:'',
        auth:[],
        date:'',
        limit:{
          text:'',
          options:[],
          select:[],
          check:[]
        },
        region:{
          text:'',
          options:[],
          select:[],//复选框
          check:[]//绑定复选框v-modle
        },
        lock:{
          text:'',
          options:[],
          check:[],
          select:[],//复选框
        }
      }
    },
    methods:{
     async submit(){

        let lockid='';
        let regionid=''; let limitid='';
        this.limit.check.forEach(item=>{
          this.limit.options.forEach(o=>{
            if(item==o.name){
              limitid+=o.id+',';
            }
          })
          this.limit.select.forEach((c)=>{
            if(c.name==item){
               c.array.forEach(s=>{
                 lockid+=s.id+',';
               })
            }
          })
        })
        this.region.check.forEach(item=>{
          this.region.select.forEach((c)=>{
            if(c.name==item){
               regionid+=c.id+',';
               c.array.forEach(s=>{
                 lockid+=s.id+',';
               })
            }
          })
        })
        this.lock.check.forEach(item=>{
          this.lock.select.forEach(c=>{
            if(item==c.name){
              console.log(c)
              lockid+=c.id+',';
            }
          })
        })
         console.log(lockid)
         const date=this.date[0].getTime()+'-'+this.date[1].getTime();
         const data=await  add_user_power(this.$store.state.token,lockid,regionid,this.name,limitid,date);
          alert(data.msg);
          if(data.code==1){
            this.$parent.getlist();
            this.cancle();
          }
      },
      cancle(){
        this.isshow.cun=true;
        this.isshow.children=false;
      },
     async querySearch(queryString,cb) {
        const data=await lockpowers_list(this.$store.state.token,queryString,1,100);
        cb(data.map(item => {
          return {
            id:item.id,
            value:item.name,
            lock_name:item.lock_name
          }
         }));
       },
       handleSelect(item){

         this.limit.select.push({
           id:item.id,
           name:item.value,
           array:item.lock_name.data
         })

       },
       async querySearch1(queryString,cb) {
          const data=await region_list(this.$store.state.token,queryString,1,100);
          cb(data.map(item => {
            return {
              id:item.id,
              value:item.region_name,
              lock_data:item.lock_data
            }
           }));
         },
         handleSelect1(item){

           this.region.select.push({
             id:item.id,
             name:item.value,
             array:item.lock_data.data
           })
         },
         async querySearch2(queryString,cb) {
            const data=await lock_list(this.$store.state.token,queryString,1,100);
            cb(data.list.map(item => {
              return {
                id:item.lock_id,
                value:item.lockname
              }
             }));
           },
           handleSelect2(item){

             this.lock.select.push({
               id:item.id,
               name:item.value
             })
           }
    },
   async  created() {
      const data=await auth_user_list(this.$store.state.token,'',1,100);
      this.auth=data;
    },
   async mounted() {
      const data=await  lockpowers_list(this.$store.state.token,'',1,100);
      const data1=await  region_list(this.$store.state.token,'',1,100);
      const data2=await  lock_list(this.$store.state.token,'',1,100);

      this.limit.options=data;
      this.region.options=data1;
      this.lock.options=data2;
    }
  }
</script>

<style scoped>
  header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 84px;
    color: rgba(5, 5, 5, 100);
    font-size: 16px;
    font-family: SourceHanSansSC-regular;
    border-bottom: 1px solid #F7F7F7;
  }
  section{
    margin-top: 30px;
  }

  .lock_name{
    display: flex;
    align-items:center;
    margin-bottom:20px;
  }
  .lock_name p{
    color: rgba(0, 0, 0, 1);
    font-size: 15px;
    margin-left: 10px;
  }
  .lock_name span{
    color: red;
  }
   .el-input{
    width: 222px;
    margin-left: 10px;
  }
  .notice{
    color: rgba(16, 16, 16, 100);
    font-size: 16px;
    margin-top: 32px;
  }
  .box{
    margin-top: 18px;
    width: 502px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    padding: 10px;
    border: 1px solid rgba(221, 221, 221, 100);
  }
  .box aside .item{
    width: 470px;
    border-radius: 10px;
    background-color: rgba(240, 240, 240, 100);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 100);
    margin-bottom: 10px;
  }
  .inline-input{
    margin-left: 10px;
  }
.wrap{
  display:flex;
  margin-top:10px;
  flex-wrap: wrap;
  width: 80%;
}
.wrap>span{
  margin-right:12px;
}
.side{
  margin-left:20px;
  margin-bottom: 10px;
}
.btn{
    margin-left: 100px;
    margin-top: 100px;
    }
    .btn span{
      display:inline-block;
      cursor: pointer;
    }
 .btn span:nth-of-type(1){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(26, 188, 156, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
  }
  .btn span:nth-of-type(2){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 100);
      color: rgba(26, 188, 156, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(26, 188, 156, 100);
      margin-left: 20px;
     }

</style>
